// views/Home.vue
<template>
  <div class="box" ref="boxRef">
    <div id="cesium" ref="mapRef"></div>
  </div>
</template>

<script setup lang="ts">
import * as Cesium from 'cesium'
import { onMounted, ref, onUnmounted } from 'vue'
const boxRef = ref(null)
const mapRef = ref(null)
function init() {
  new Cesium.Viewer('cesium', {
    timeline: false,
    animation: false,
    //这里是配置项
  })
  Cesium.Ion.defaultAccessToken = 'your_access_token'
}

//  const useScreenScale = (domRef:any) => {
//     const isFullScreen = ref(false)
//     const resizeEvent = () => {
//         if (window.innerWidth === 1920 && window.innerHeight === 1080) {
//             isFullScreen.value = true
//             if (domRef.value) {
//                 domRef.value.style.transform = `scale(${1}, ${1})`
//                 domRef.value.style.transformOrigin = '0 0'
//                 domRef.value.style.width = '1920px'
//                 domRef.value.style.height = '1080px'
//             }
//             return
//         }
//         const scaleY = window.innerHeight / 960
//         const scaleX = window.innerWidth / 1920
//         if (domRef.value) {
//             isFullScreen.value = false
//             domRef.value.style.width = '1920px'
//             domRef.value.style.height = '960px'
//             domRef.value.style.transform = `scale(${scaleX}, ${scaleY})`
//             domRef.value.style.transformOrigin = '0 0'
//         }
//     }

//   }

const resizeEvent = (domRef = boxRef) => {
  if (window.innerWidth === 1920 && window.innerHeight === 1080) {
    if (domRef.value) {
      domRef.value.style.transform = `scale(${1}, ${1})`
      domRef.value.style.transformOrigin = '0 0'
      domRef.value.style.width = '1920px'
      domRef.value.style.height = '1080px'
    }
    return
  }
  const scaleY = window.innerHeight / 1080
  const scaleX = window.innerWidth / 1920
  if (domRef.value) {
    domRef.value.style.width = '1920px'
    domRef.value.style.height = '1080px'
    domRef.value.style.transform = `scale(${scaleX}, ${scaleY})`
    domRef.value.style.transformOrigin = '0 0'
    

    
  }
}

// window.addEventListener('resize', () => {
//   console.log('resize')
//   console.log(document.body.clientWidth)
//   console.log(document.body.clientHeight)
// })

onMounted(() => {
  init()
  resizeEvent()
  window.addEventListener('resize', resizeEvent)
})

onUnmounted(() => {
  window.removeEventListener('resize', resizeEvent)
})
</script>

<style scoped>
.box {
  width: 1920px;
  height: 960px;
}
#cesium {
  width: 100%;
  height: 100%;
}
</style>
